<template>
  <div class="app-container pull-height">
    <div>
      <el-row
        style="background-color: white;position: relative;top: 10px; padding: 5px;"
      >
        <el-col :span="2" :offset="1">
          <el-button
            type="primary"
            size="medium"
            style="position: relative;top: 2px;"
            v-if="role.endsWith('m') || role.endsWith('manager')"
            @click="addCount()"
            >新增</el-button
          >
        </el-col>
        <el-col :span="13" :offset="7" class="radio-container">
          <el-radio-group
            v-model="radio"
            size="medium"
            style="position: relative;top: 4px;"
            @change="all"
          >
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="启用"></el-radio-button>
            <el-radio-button label="禁用"></el-radio-button>
          </el-radio-group>
          <el-input
            placeholder="请输入关键字（仓库名/描述）"
            size="medium"
            v-model="input"
            clearable
            style="width: 250px; position: relative;top: 4px;left: 10px;"
          >
          </el-input>
          <el-button
            type="primary"
            size="medium"
            style="position: relative;top: 4px;left: 10px;"
            @click="searchAll()"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1">
          <i
            class="el-icon-refresh"
            style="font-size: 1.3em;position: relative;right: 65px;top: 10px;"
            @click="clearItem()"
          ></i>
        </el-col>
      </el-row>
      <!--                       ********表格**********                -->
      <el-row style="background-color: white;position: relative;top: 10px;">
        <el-col :span="22" :offset="1">
          <el-table :data="tableData">
            <!-- ----------------------表格中的数据 -->
            <el-table-column
              prop="id"
              label="仓库id"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="account"
              label="仓库名"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="size"
              label="仓库容积"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="description"
              label="描述"
              align="center"
            ></el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="{ row }">
                <!-- <el-switch
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        v-model="row.state"
                        active-text="启用"
                        inactive-text="停用"
                        active-value="1"
                        inactive-value="3"
                        @change="modifyState(row)"
                        v-if="
                          role == 'manager' ||
                            (userAll.sid ==
                              5 &&
                              (role.endsWith('m')||role.endsWith('x')))
                        "
                      >
                      </el-switch> -->

                <span
                  style="background-color: rgba(163, 221, 159, 0.841);font-size: 1.3em;"
                  v-if="row.state == 1"
                  >启用</span
                >
                <span
                  style="background-color: rgba(67, 152, 238, 0.841);font-size: 1.3em;"
                  v-if="row.state == 0"
                  >未使用</span
                >
                <span
                  style="background-color: rgba(238, 109, 89, 0.653);font-size: 1.3em;"
                  v-if="row.state == 3"
                  >弃用</span
                >
                <span
                  style="background-color: rgba(249, 211, 25, 0.653);font-size: 1.3em;"
                  v-if="row.state == 2"
                  >禁用</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="time"
              label="创建时间"
             
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center" width="180">
              <template slot-scope="scope">
                <el-button
                  @click="handleEdit(scope.row)"
                  v-if="
                    role == 'manager' ||
                      (userAll.sid == 5 &&
                        (role.endsWith('m') || role.endsWith('x')))
                  "
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <!-- --------------------------------------------分页 -->
        <el-col :span="18" :offset="3">
          <el-row>
            <template>
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[8, 16, 24, 32]"
                  :page-size="pageSize"
                  layout="prev, pager, next, jumper, sizes, total"
                  :total="tableTotal"
                >
                </el-pagination>
              </div>
            </template>
          </el-row>
        </el-col>
      </el-row>
      <!--          ------------新增的弹框---------- -->
      <el-dialog title="新增仓库" :visible.sync="dialogVisible" width="30%">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="名称">
            <el-input
              v-model="form.account"
              placeholder="请输入仓库名"
            ></el-input>
          </el-form-item>
          <el-form-item label="仓库容积">
            <el-input v-model="form.size" placeholder="请输入容积"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="form.description"
              placeholder="请描述仓库主要存储内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </el-dialog>

      <!--          ------------编辑的弹框---------- -->
      <el-dialog
        title="编辑用户信息"
        :visible.sync="dialogVisible2"
        width="30%"
      >
        <el-form ref="form" :model="form2" label-width="120px">
          <el-form-item label="名称">
            <el-input
              v-model="form2.account"
              placeholder="请输入仓库名"
            ></el-input>
          </el-form-item>
          <el-form-item label="仓库容积">
            <el-input v-model="form2.size" placeholder="请输入容积"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="form2.description"
              placeholder="请描述仓库主要存储内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="submitForm2">确定</el-button>
        </span>
      </el-dialog>

      <!-- ------------------删除弹框----------- -->
      <el-dialog
        title="删除提示"
        :visible.sync="visible2"
        width="30%"
        :before-close="handleClose2"
      >
        <span>删除该账号，将永久失效！确定删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="sureDel2()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- ------------------查看修改记录弹框----------- -->
      <el-dialog
        title="修改记录"
        :visible.sync="visible4"
        width="60%"
        :before-close="handleClose4"
      >
        <el-table :data="tableData2">
          <!-- ----------------------表格中的数据 -->
          <el-table-column
            prop="account"
            label="账户"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sid"
            label="所属部门"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="time"
            label="修改时间"
            align="center"
          ></el-table-column>
          <el-table-column prop="aid" label="操作员id" align="center">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible4 = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //<!-- --------------------------------------------------------------第一模块----------------------- -->
      //搜索功能中的单选按钮
      radio: "全部",
      //搜索功能的输入关键字
      input: "",
      //表格名
      tableData: [],
      //查看详情表格名
      tableData2: [],
      //分页
      currentPage: 1, // 当前页码
      pageSize: 8, // 每页显示条数
      tableTotal: 0, //总条数
      //用于记录页码改变是因为哪一个方法
      changePage: true,
      //记录分页的第二页之后应该请求的方法
      pageState: 0,
      //停用启用按钮
      value1: true,
      //新增用户的弹框
      dialogVisible: false,

      form: {
        account: "",
        size: "",
        description: ""
      },
      //编辑用户的弹框
      dialogVisible2: false,
      form2: {
        id: 0,
        account: "",
        size: "",
        description: ""
      },
      //保存该账号的信息
      userAll: null,
      //保存该账号的身份信息
      role: "",
      //保存部门信息
      sector: null,
      //部门的下拉框
      options: [
        {
          id: null,
          name: ""
        }
      ],
      options2: [
        {
          id: null,
          name: ""
        }
      ],
      value: "",
      //删除弹框
      visible: false,
      visible2: false,
      visible3: false,
      visible4: false,
      //记录选择行的id
      uid: null,
      stopId: null,
      managerNum: 0,
      editSid: 0
    };
  },
  methods: {
    //<!-- --------------------------------------------------------------第一模块----------------------- -->
    //刷新功能
    clearItem: function() {
      this.radio = "全部";
      this.input = "";
      this.getTableData();
      this.pageState = 0;
    },
    // 获取表格数据的方法，这里假设通过异步请求从服务器获取数据
    getTableData() {
      this.$axios
        .get("/systemDepot/findall/" + this.currentPage + "/" + this.pageSize)
        .then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data.records;
          this.tableTotal = res.data.data.total;
        });
    },
    handleSizeChange(val) {
      // 页面大小修改时触发
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 页码修改时触发
      console.log(`当前页: ${val}`);
      // 给当前页属性赋值
      this.currentPage = val;
      var num = this.pageState;
      if (num == 0) {
        this.getTableData();
      } else if (num == 2) {
        this.all2();
      } else if (num == 3) {
        this.searchAll2();
      }
    },
    // 编辑操作
    handleEdit(row) {
      console.log("编辑操作", row);
      // ...
      this.form2.id = row.id;
      this.dialogVisible2 = true;
    },
    // 删除操作
    handleDelete(row) {
      this.findManager();
      console.log(this.managerNum);
      if (this.managerNum == 1) {
        this.$message.error(
          "目前管理员只有一位，不能进行状态或者角色操作！！！！！"
        );
        return;
      } else {
        console.log(row);
        if (this.userAll.account == row.account) {
          this.visible = true;
          this.uid = row.id;
        } else {
          this.visible2 = true;
          this.uid = row.id;
        }
      }
    },
    //删除账号
    sureDel: function() {
      this.$axios.get("/user/delUser/" + this.uid).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.$router.push("/");
          this.visible = false;
        }
      });
    },
    //删除账号的取消确定
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //编辑账号
    sureDel2: function() {
      this.$axios.get("/user/delUser/" + this.uid).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.visible2 = false;
          this.getTableData();
        }
      });
    },
    //编辑账号的取消确定
    handleClose2(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //状态修改方法
    modifyState(row) {
      console.log(row);

      console.log(this.managerNum);

      console.log("修改状态成功", row);
      //   if (row.status) {
      //     this.$axios.get("/user/openUser/" + row.id).then(res => {
      //       if (res.status == 200) {
      //         this.$message.success("启用成功");
      //       }
      //     });
      //   } else {
      //     if (row.account == window.localStorage.getItem("account")) {
      //       this.visible3 = true;
      //       this.stopId = row.id;
      //     } else {
      //       this.$axios.get("/user/stopUser/" + row.id).then(res => {
      //         if (res.status == 200) {
      //           this.$message.success("禁用成功");
      //         }
      //       });
      //     }
      //   }
    },
    //禁用自己账户
    sureStop: function() {
      this.$axios.get("/user/stopUser/" + this.stopId).then(res => {
        if (res.status == 200) {
          this.visible3 = false;
          this.$router.push("/");
        }
      });
    },
    //禁用账号的取消确定
    handleClose3(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //查看详情退出
    handleClose4() {
      this.visible4 = false;
    },
    //新增用户的方法
    addCount: function() {
      this.dialogVisible = true;
    },
    //新增用户的弹框
    submitForm: function() {
      // 提交表单数据到后端
      console.log("提交表单数据：", this.form);
      this.$axios.post("/systemDepot/addSector", this.form).then(res => {
        if (res.status == 200) {
          this.$message.success("新增仓库成功");
        }
      });

      this.dialogVisible = false;
    },
    //编辑用户的弹框
    submitForm2: function() {
      // 提交表单数据到后端
      console.log("提交表单数据：", this.form2);
      this.$axios.post("/systemDepot/updateSector", this.form2).then(res => {
        if (res.status == 200) {
          this.$message.success("修改仓库信息成功");
        }
      });
      this.dialogVisible2 = false;
    },
    all(value) {
      this.pageState = 2;
      this.all2(value);
    },
    //根据搜索中的单选按钮查看状态
    all2(value) {
      this.input = "";
      console.log(value);
      if (value == "全部") {
        this.getTableData();
      } else if (value == "启用") {
        this.$axios
          .get(
            "/systemDepot/findStateOpen/" +
              this.currentPage +
              "/" +
              this.pageSize
          )
          .then(res => {
            this.tableData = res.data.data.records;
            this.tableTotal = res.data.data.total;
          });
      } else if (value == "禁用") {
        this.$axios
          .get(
            "/systemDepot/findStateClose/" +
              this.currentPage +
              "/" +
              this.pageSize
          )
          .then(res => {
            this.tableData = res.data.data.records;
            this.tableTotal = res.data.data.total;
          });
      }
    },
    //多条件查询
    searchAll: function() {
      this.pageState = 3;
      this.searchAll2();
    },

    searchAll2: function() {
      var num = 5;
      if (this.radio == "全部") {
        num = 3;
      } else if (this.radio == "启用") {
        num = 0;
      } else if (this.radio == "禁用") {
        num = 1;
      }
      this.$axios
        .get(
          "/systemDepot/searchAll/" +
            num +
            "/" +
            this.input +
            "/" +
            this.currentPage +
            "/" +
            this.pageSize
        )
        .then(res => {
          this.tableData = res.data.data.records;
          this.tableTotal = res.data.data.total;
          this.input = "";
          this.radio = "全部";
        });
    }
  },
  mounted: function() {
    this.getTableData();
    this.$axios
      .get("/user/findUserByAccount/" + window.localStorage.getItem("account"))
      .then(res => {
        console.log(res.data.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
      });
    this.findManager();
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
  background-color: #ddf1da;
}

.demo-table-expand label {
  width: 90px;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
